<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <!-- 引用开发版 -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
    1、vue常用的按键别名
        回车 => enter
        删除 => delete（捕获“删除”和“退格”）
        退出 => esc
        空格 => space
        换行 => tab
        上 => up
        下 => down
        左 => left
        右 => right

    2、vue未提供别名的按键，可以使按键原始的key去绑定，但注意由多个单词组成的Key，需要转为kebab-case(短横线命名)
        例如：CapsLock(切换大小写) -> caps-lock

    3、系统修饰键（用法特殊）：ctrl、alt、shift、meta
        （1）配合keyup使用：按下修饰键的同时，再按下其它键，随后释放其它键，事件才会被触发
            小技巧：指定某个具体的其它键(例如：ctrl.y)
        （2）配合keydown使用：正常触发事件

    4、也可以使用keyCode去指定具体的按键（不推荐）
    5、Vue.config.keyCodes.自定义键名=键码，可以定制按键别名
     -->
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入的数据" @keyup.enter="showInfo"/>
        <input type="text" placeholder="按下回车提示输入的数据" @keyup.ctrl.y="showInfo"/>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip=false

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'   
            },
            methods: {
                showInfo(event) {
                    console.log(event.key, event.keyCode)
                    console.log(event.target.value)
                },
            }
        })
    </script>
</body>
</html